<template>
  <div
    class="base-table"
    :class="{ 'sidebar-collapse': isCollapse }"
  >
    <!-- 搜索区域 -->
    <div class="search-wrapper">
      <slot name="search" />
      <div
        v-if="!hideOperation"
        class="button-wrapper"
      >
        <el-button-group>
          <el-button
            type="primary"
            :icon="Search"
            @click="handleSearch"
          >
            {{ t('table.search') }}
          </el-button>
          <el-button
            :icon="Refresh"
            class="reset-button"
            @click="handleReset"
          >
            {{ t('table.reset') }}
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 操作区域 -->
    <div class="operation-wrapper">
      <slot name="operation" />
      &nbsp;
      <el-button-group v-if="!hideOperation">
        <el-button
          type="primary"
          :icon="Plus"
          @click="handleAdd"
        >
          {{ t('table.add') }}
        </el-button>
      </el-button-group>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      v-bind="$attrs"
      :data="tableData"
      border
      stripe
      height="calc(100vh - 220px)"
      style="width: 100%"
    >
      <slot />
      <!-- 默认操作列 -->
      <el-table-column
        v-if="!hideOperation"
        :label="t('table.operation')"
        width="210"
        fixed="right"
      >
        <template #default="{ row }">
          <el-button-group>
            <el-button
              type="primary"
              link
              :icon="'View'"
              @click="handleDetail(row)"
            >
              {{ t('table.detail') }}
            </el-button>
            <el-button
              type="primary"
              link
              :icon="Edit"
              @click="handleEdit(row)"
            >
              {{ t('table.edit') }}
            </el-button>
            <el-button
              type="danger"
              link
              :icon="Delete"
              @click="handleDelete(row)"
            >
              {{ t('table.delete') }}
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Delete, Edit, Plus, Refresh, Search } from '@element-plus/icons-vue';
  import { ElMessageBox } from 'element-plus';
  import { computed, inject } from 'vue';
  import { useI18n } from 'vue-i18n';

  // 注入侧边栏状态
  const isCollapse = inject('isCollapse', ref(false));

  const { t } = useI18n();

  const props = withDefaults(
    defineProps<{
      /** 表格数据 */
      data?: any[];
      /** 总条数 */
      total?: number;
      /** 加载状态 */
      loading?: boolean;
      /** 隐藏操作列 */
      hideOperation?: boolean;
      /** 当前页码 */
      page?: number;
      /** 每页条数 */
      limit?: number;
    }>(),
    {
      data: () => [],
      total: 0,
      loading: false,
      hideOperation: false,
      page: 1,
      limit: 10
    }
  );

  const emit = defineEmits<{
    /** 搜索事件 */
    (e: 'search'): void;
    /** 重置事件 */
    (e: 'reset'): void;
    /** 新增事件 */
    (e: 'add'): void;
    /** 编辑事件 */
    (e: 'edit', row: any): void;
    /** 详情事件 */
    (e: 'detail', row: any): void;
    /** 删除事件 */
    (e: 'delete', row: any): void;
    /** 页码改变事件 */
    (e: 'page-change', page: number): void;
    /** 每页条数改变事件 */
    (e: 'size-change', size: number): void;
    /** 更新页码 */
    (e: 'update:page', page: number): void;
    /** 更新每页条数 */
    (e: 'update:limit', limit: number): void;
  }>();

  // 表格数据
  const tableData = computed(() => props.data);

  // 分页相关
  const currentPage = computed({
    get: () => props.page,
    set: (val) => emit('update:page', val)
  });

  const pageSize = computed({
    get: () => props.limit,
    set: (val) => emit('update:limit', val)
  });

  // 搜索相关
  const handleSearch = () => {
    emit('search');
  };

  const handleReset = () => {
    emit('reset');
  };

  // 操作相关
  const handleAdd = () => {
    emit('add');
  };

  const handleEdit = (row: any) => {
    emit('edit', row);
  };

  const handleDetail = (row: any) => {
    emit('detail', row);
  };

  const handleDelete = (row: any) => {
    ElMessageBox.confirm(t('table.deleteConfirm'), t('table.tips'), {
      type: 'warning'
    })
      .then(() => {
        emit('delete', row);
      })
      .catch((error) => {
        console.error('删除失败', error);
      });
  };

  // 分页相关
  const handleSizeChange = (val: number) => {
    emit('size-change', val);
  };

  const handleCurrentChange = (val: number) => {
    emit('page-change', val);
  };
</script>

<style scoped lang="scss">
  .base-table {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;

    .search-wrapper {
      display: flex;
      align-items: start;
      margin-bottom: 16px;
      max-width: calc(100% - 100px);
      .button-wrapper {
        margin-left: 16px;
      }
    }

    .operation-wrapper {
      margin-bottom: 16px;
      text-align: right;
      width: 100%;
      margin-top: -56px;
    }

    .pagination-container {
      position: fixed;
      left: var(--aside-width, 216px); // 使用CSS变量控制左侧位置
      right: 16px; // 右侧padding
      bottom: 16px;
      display: flex;
      justify-content: center;
      padding: 16px 0;
      background: #fff;
      z-index: 10;
    }
  }

  // 侧边栏收起时的样式
  .sidebar-collapse {
    .pagination-container {
      --aside-width: 80px;
    }
  }

  :deep(.el-form) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .el-form-item {
      margin-bottom: 8px;
      margin-right: 16px;
      .el-select {
        min-width: 150px;
      }
    }
  }

  :deep(.button-wrapper .el-button-group) {
    width: 185px;
  }

  :deep(.el-table th.el-table__cell) {
    background: #fff7e5;
  }

  :deep(.el-table) {
    border: none;
    th.el-table__cell,
    td.el-table__cell {
      border: none;
      border-bottom: 1px solid #f2f2f2;
    }
  }
</style>
